<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			li{
				list-style: none;
			}
			#vant{
				margin:0 auto;
				width: 1405px;
				position: relative;
			}
			#vant #nav li a{
				height: 425px;
				width: 1400px;
				/* border: 1px solid red; */
				display: inline-block;
			}
			#vant #nav li:nth-of-type(1) a{
				 background: url(img/1.png) no-repeat;
			}
			#vant #nav li:nth-of-type(2) a{
				 background: url(img/2.jpg) no-repeat;
				 display: none;
			}
			#vant #nav li:nth-of-type(3) a{
				 background: url(img/3.jpg) no-repeat;
				 display: none;
			}
			#vant #nav li:nth-of-type(4) a{
				 background: url(img/4.png) no-repeat;
				 display: none;
			}
			#vant #tip{
				position: absolute;
				background-color: #9A9684;
				height: 25px;
				line-height: 25px;
				border-radius: 15px;
				width: 160px;
				bottom: 10px;
				right: 40%;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
			}
			#vant #tip li{
				background-color: white;
				height: 15px;
				width: 15px;
				line-height: 15px;
				border-radius: 50%;
				text-align: center;
				margin-left: 5px;
				
			}
			#vant #tip li:hover{
				cursor: pointer;
			}
		</style>
		<script>
			var index=0;
			var timer;
			function  shiftImg(){
				document.getElementById("nav").children[index].firstElementChild.style.display="none";
				document.getElementById("tip").children[index].style.backgroundColor="white";//40BBCD
				index++;
				if(index>=4)
					index=0;
				document.getElementById("nav").children[index].firstElementChild.style.display="block";
				document.getElementById("tip").children[index].style.backgroundColor="#40BBCD";//
				
			}
			window.onload=function(){
				timer=window.setInterval("shiftImg()",1300);
			
				var lis=document.getElementById("tip").children;
				for(var i=0;i<lis.length;i++){
					console.log(lis.length+"=="+i);
					lis[i].onmouseover=function(){
						let j=this.getAttribute("index"); 
						window.clearInterval(timer);
						document.getElementById("nav").children[index].firstElementChild.style.display="none";
						document.getElementById("tip").children[index].style.backgroundColor="white";//40BBCD
						console.log(j+"=index=");
						index=j;
						console.log(j+"=index="+index);
						document.getElementById("nav").children[index].firstElementChild.style.display="block";
						document.getElementById("tip").children[index].style.backgroundColor="#40BBCD";//
						
					}
					lis[i].onmouseout=function(){
						timer=window.setInterval("shiftImg()",1300);
					}
				}
			}
			
		</script>
	</head>
	<body>
		<!--4个元素，disply属性控制是否显示-->
		<!-- 一个图片元素，更换src属性，实现切换-->
		<div id="vant"> 
			<ul id="nav">
				<li><a href="http://www.bdqn.cn"></a></li>
				<li><a href="http://www.bdqn.cn"></a></li>
				<li><a href="http://www.bdqn.cn"></a></li>
				<li><a href="http://www.bdqn.cn"></a></li>
			</ul>
			<ul id="tip">
				<li index="0" style="background-color:#40BBCD;"></li>
				<li index="1"></li>
				<li index="2"></li>
				<li index="3"></li>
				<!--
				data-xxx
				<li index="3" onmouseover="" onmouseout="ss"></li>
				-->
				--
			</ul>
		</div>
	</body>
</html>
